<template>
  <div class="about">
    <h1>关于组件</h1>
    <!-- reactive的数据渲染 -->
    <h1 @click="say">{{hobby}}</h1>
    <h1>计算：{{douShen}}</h1>
    <input type="text" v-model="myname">
    <h1>{{myname}}</h1>
  </div>
</template>
<script>
import { defineComponent, watchEffect,ref,computed,reactive,toRefs,watch} from 'vue'
// vue3 几乎全部支持vue2 
// reactive 可以创建多个数据
// 作用: 定义多个数据的响应式
// const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
// 响应式转换是“深层的”：会影响对象内部所有嵌套的属性
// 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的
export default defineComponent({
  setup() {
      let myname=ref("小王");
      let age=ref(18);
      let person=reactive({
          sex:"女",
          hobby:"吃",
          shengao:"150",
          tizhong:"120",
          obj:{
            name:"小孙",
            age:18
          },
          say:()=>{  //方法
              // 改变reactive的数据
              console.log("点击了")
              person.hobby="吃三顿";
              person.obj.name="小赵";
              console.log(person)
          },
          douShen:computed(()=>{ //计算属性
            return person.shengao*2
          })
      })
      // watch  监听器
      // 监听ref创建的数据
      watch(myname,(newVal,oldVal)=>{
          // console.log(newVal,"---",oldVal)
      })
      // 监听reactive创建的数据
      watch(()=>person.hobby,(newVal,oldVal)=>{
        // console.log(newVal,"---",oldVal)
      })
      //  watchEffect: 监视所有回调中使用的数据
      // 监听所有响应式的数据变化
      watchEffect(()=>{ //只要有数据改变就会触发
        console.log(myname.value)
        console.log("有内鬼，停止交易")
      })
      // 
      watch(()=>person.obj,(newVal,oldVal)=>{
        // newVal 新的值  
        // 新的值 和旧的值相等 ?
          console.log(newVal,"---",oldVal)
      },{
        immediate:true,//首次渲染就监听
        deep:true//深度监听
      })
      // toRefs
// 把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref
// 应用: 当从合成函数返回响应式对象时，toRefs 非常有用，
// 这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用
      return{
        myname,
        age,
        ...toRefs(person)
      }
  },
})
</script>

